import React from "react";
import { Carousel } from "antd";
import News1 from "../../assets/20210620141751149.png";
import "./css/news.css";
import NewsItem from "./NewsItem";

const contentStyle = {
  margin: 0,
  height: "400px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const News = () => {
  const onChange = (currentSlide) => {
    console.log(currentSlide);
  };

  return (
    <section id="news" class="news">
      <div class="height100"></div>
      <h2>What's New</h2>
      <div class="height30"></div>
      <div class="slides_container">
        <div class="slides">
          <Carousel autoplay>
            <div class="slide">
              <div class="contentStyle">
                <NewsItem
                  img="./src/assets/7dcdb6d9ff8fa78dbe26fc3fc1a28ee8.png"
                  title="嗨 Jina，帮我画一幅高山流水图"
                  link="https://blog.csdn.net/Jina_AI/article/details/128013000?spm=1000.2115.3001.5927"
                />
              </div>
            </div>
            <div class="slide">
              <div class="contentStyle">
                <NewsItem
                  img="./src/assets/17830bce26914cf8832dc8c4fbeb9e47.png"
                  title="这一秒，困扰了程序员 50 年——闰秒终于要被取消了！"
                  link="https://csdnnews.blog.csdn.net/article/details/128040013?spm=1000.2115.3001.5927"
                />
              </div>
            </div>
            <div class="slide">
              <div class="contentStyle">
                <NewsItem
                  img="./src/assets/75e93fee79884976a9dd2a90c3d43180.png"
                  title="十年 Python 程序员，初次尝试 Rust：“非常优秀！”"
                  link="https://blog.csdn.net/csdnnews/article/details/128014543?spm=1000.2115.3001.5927"
                />
              </div>
            </div>
            <div class="slide">
              <div class="contentStyle">
                <NewsItem
                  img="./src/assets/e54987a2198c1657562dc8d22754dd9e.png"
                  title="Android 开发者的跨平台 - Flutter or Compose ？"
                  link="https://blog.csdn.net/ZuoYueLiang/article/details/128031574?spm=1000.2115.3001.5927"
                />
              </div>
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export default News;
